<template>
  <div class="quote-price-container">
    <searchBox>
      <template #yyxbread>
        <div style="display: flex; align-items: center">
          <el-icon>
            <Location />
          </el-icon>
          <span class="f12 ml10 mr10">当前位置：</span>
          <el-breadcrumb separator="/" class="f14">
            <el-breadcrumb-item class="active" style="color: #1d2129; font-weight: bold">预算报价</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </template>
    </searchBox>
    <div class="content">
      <el-container>
        <el-aside width="200px">
          <Side :name="'quote-price'" />
        </el-aside>
        <el-main ref="preselection">
          <div class="search-wrap">
            <el-input
              class="jzt-searchkey-com"
              v-model="searchkey"
              style="max-width: 600px"
              placeholder="输入业主名称/房屋地址/手机号"
              @change="budgetCustomerListFun"
            >
              <template #append>
                <el-button :icon="Search" size="small" @click="budgetCustomerListFun">搜索</el-button>
              </template>
            </el-input>
          </div>
          <div class="list-warp">
            <div :style="{ '--num': Math.round((width - 260) / 300) }">
              <el-col>
                <div class="list-item add-btn" @click="dialogVisible = true">
                  <el-icon class="f28 mb20"><Plus /></el-icon>
                  <p>创建预算报价</p>
                </div>
              </el-col>
              <el-col v-for="(item, index) in list" :key="index">
                <div class="list-item" @click="$router.push({ path: '/quote-price/following/list', query: { ysId: item.ysId } })">
                  <h3>
                    <p class="text-over" style="max-width: 220px">
                      {{ item.customerAddress || "-" }}
                    </p>
                    <el-icon v-if="!item.number" @click.stop="clickDel(item)"><Delete /></el-icon>
                    <!-- <img
                      src="@/assets/images/edit-icon.png"
                      alt=""
                      @click="
                        () => {
                          isOpenEdit = true;
                          optionInfoEdit.detail = item;
                        }
                      "
                    /> -->
                  </h3>
                  <h4>{{ item.customerSummary || "-" }}</h4>
                  <div class="info">
                    <div>
                      <span class="label">客户</span>
                      <p>
                        <b>{{ item.customerName || "-" }}</b
                        ><el-divider direction="vertical" /><b>{{ item.customerMobileCode || "-" }}</b>
                      </p>
                    </div>
                    <div>
                      <span class="label">设计师</span>
                      <p>
                        <b>{{ item.designUserName || "-" }}</b
                        ><el-divider direction="vertical" /><b style="color: #86909c">{{ item.updateTime || "-" }}</b>
                      </p>
                    </div>
                  </div>
                  <div class="mt15" style="text-align: right">
                    <el-button type="primary">关联预算({{ item.number || "-" }})</el-button>
                  </div>
                </div>
              </el-col>
            </div>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
  <!-- 删除模板空间 二次确认 -->
  <ActionSubmitDialog
    v-model:isOpen="_isOpenDel"
    :title="'提醒'"
    :message="'您正在删除预算报价，请问是否继续当前操作？'"
    :submitBtnText="'继续'"
    @submit="returnSubmitDel"
  />

  <!-- 修改名称 -->
  <editNameDialog v-model:isOpen="isOpenEdit" :optionInfo="optionInfoEdit" />

  <!-- 选择关联客户 -->
  <el-dialog v-model="dialogVisible" title="创建预算报价" width="800" modal-class="following-custom-dialog" :show-close="false">
    <div class="dialog-content">
      <!-- <div style="position: sticky; top: 0; background-color: white; z-index: 2"> -->
      <div>
        <p>请选择关联客户</p>
        <div class="search-wrap">
          <el-input v-model="customKey" clearable placeholder="输入业主名称/房屋地址/手机号" @change="getCustomListFun">
          </el-input>
          <el-tooltip
            content="跳转到CRM管理页面录入客户信息"
            placement="bottom"
            effect="light"
            popper-class="following-custom-popper"
          >
            <el-button class="add-custom" type="primary" @click="toPath('/crm/client-manager')">新增客户</el-button>
          </el-tooltip>
        </div>
      </div>

      <!-- 关联客户列表 -->
      <div class="custom-list mt4">
        <template v-if="customList.length > 0">
          <div
            class="custom-item"
            :class="{ active: currObj.customerId === item.customerId }"
            v-for="(item, index) in customList"
            :key="index"
            @click="
              () => {
                currObj = item;
              }
            "
          >
            <h3 class="mb10">
              <b>{{ item.receivingName }}</b
              ><el-divider direction="vertical" /><i>{{ "-" }}</i>
            </h3>
            <p class="mb10 f12">电话：{{ item.receivingMobile }}</p>
            <p class="f12">地址：{{ item.address }}</p>
            <div class="active-icon" v-if="currObj.customerId === item.customerId">
              <el-icon><CircleCheckFilled /></el-icon>
            </div>
          </div>
        </template>
        <el-empty v-else description="暂无数据" />
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="info"
          @click="
            () => {
              dialogVisible = false;
              currObj = { customerId: null };
            }
          "
          >取消</el-button
        >
        <el-button
          type="primary"
          :disabled="!currObj.customerId"
          @click="
            () => {
              dialogVisible = false;
              crateBudgetQuotationFun();
            }
          "
          >确认创建</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { ElMessage } from "element-plus";
import Side from "@/components/Side/index";
import searchBox from "@/views/home/components/search";
import { useElementSize } from "@vueuse/core";
const preselection = ref(null);
const { height, width } = useElementSize(preselection);
import { Plus, Search, CircleCheckFilled, Delete } from "@element-plus/icons-vue";
import { getCustomList, crateBudgetQuotation, budgetCustomerList, delBudgetCustomer } from "@/apis/quote-price/following";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
import editNameDialog from "./components/editNameDialog.vue";
import useManageStore from "@/store/modules/manage";
const manageStore = useManageStore();
import ActionSubmitDialog from "@/components/ActionSubmitDialog";

const list = ref([]);
const searchkey = ref("");
const dialogVisible = ref(false); //选择关联客户弹窗
const customKey = ref("");
const customList = ref([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }]); //关联客户列表
const currObj = ref({ customerId: null });
const isOpenEdit = ref(false);
const optionInfoEdit = ref({ detail: {} });
const _isOpenDel = ref(false);
const currDel = ref({}); //当前要删除的obj

onMounted(() => {
  getCustomListFun(); //获取关联客户列表
  budgetCustomerListFun(); //查询预算报价列表
});

const toPath = url => {
  const _url = window.location.host + url;
  window.open("http://" + _url, "_blank");
};

//点击删除按钮
const clickDel = obj => {
  currDel.value = obj;
  _isOpenDel.value = true;
  console.log("这里进行删除操作");
};
//确认删除
const returnSubmitDel = () => {
  delBudgetCustomer({ ysId: currDel.value.ysId }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "报价客户信息删除成功!",
        type: "success"
      });
      _isOpenDel.value = false;
      budgetCustomerListFun();
    }
  });
};

//获取关联客户列表
const getCustomListFun = () => {
  getCustomList({ search: customKey.value }).then(res => {
    if (res.code === 200) {
      customList.value = res.data;
    }
  });
};

//创建预算报价
const crateBudgetQuotationFun = () => {
  crateBudgetQuotation({
    ...currObj.value,
    customerName: currObj.value.receivingName,
    customerMobileCode: currObj.value.receivingMobile,
    customerAddress: currObj.value.address,
    customerSummary: ""
  }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: "报价单创建成功",
        type: "success"
      });

      currObj.value = { customerId: null };
      budgetCustomerListFun();

      //创建成功之后直接跳转到报价详情页
      res.data && router.push({ path: "/quote-price/following/list", query: { ysId: res.data } });
    }
  });
  // router.push({ path: "/quote-price/following/list", query: { ysId: "1829785907958050816" } });
};

//查询预算报价列表
const budgetCustomerListFun = () => {
  budgetCustomerList({ ysState: 1, search: searchkey.value }).then(res => {
    if (res.code === 200) {
      list.value = res.data || [];
      manageStore.followingTotal = list.value.length;
    }
  });
};
</script>

<style lang="scss">
.following-custom-dialog {
  .dialog-content {
    height: 500px;
    overflow-y: auto;
    & > div > p {
      color: #3d3d3d;
      margin-bottom: 10px;
    }
    .search-wrap {
      display: flex;
      .el-button {
        margin-left: 4px;
      }
    }
    .add-custom.el-button:hover {
      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
    }
    .custom-list {
      padding: 20px;
      border: 1px solid #e1e6ed;
      .custom-item {
        border: 1px solid #e1e6ed;
        padding: 16px;
        margin-bottom: 10px;
        position: relative;
        border-radius: 4px;
        cursor: pointer;
        h3 {
          color: #1d2129;
          font-weight: normal;
          b {
            font-weight: normal;
          }
          i {
            font-style: normal;
            font-size: 12px;
          }
        }
        .active-icon {
          position: absolute;
          font-size: 20px;
          right: 36px;
          top: calc(50% - 10px);
        }
        &.active {
          border-color: transparent;
          background: #eef1f4;
          box-shadow: 0px 0px 8px 0px rgba(4, 54, 114, 0.2);
        }
      }
    }
  }
}
.following-custom-popper.el-popper {
  width: 144px;
  padding: 16px !important;
  color: black;
}
</style>
<style lang="scss" scoped>
:deep(.side) {
  border-radius: 10px 0 0 10px;
}
.el-button--primary {
  --el-button-bg-color: #424e66;
  border: none;
}
.el-button.el-button--info {
  --el-color-info: #f2f3f5;
  --el-color-white: #1d2129;
  &:hover {
    --el-button-hover-bg-color: #f2f3f5 !important;
    border-color: #f2f3f5 !important;
  }
}
.quote-price-container {
  margin-top: 114px;
  height: calc(100vh - 140px);
  box-sizing: border-box;
  display: flex;
  :deep(.l-search) {
    & > div > span {
      font-size: 14px !important;
    }
  }
  :deep(.el-breadcrumb__inner) {
    color: #1d2129;
    font-weight: bold;
  }

  .content {
    width: 100%;
    padding: 0 20px;
    padding-top: 20px;
    .side {
      width: 200px;
      padding-top: 20px;
      :deep(.menu-item) {
        &:first-of-type {
          display: none;
        }
      }
    }
    :deep(.el-container) {
      box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
      height: calc(100%);
      .el-aside {
      }
      .el-main {
        border-radius: 0 10px 10px 0;
        border-left: 1px solid #e1e6ed;
        padding: 0;
        // padding-left: 10px;
        // padding-right: 10px;
        // padding-bottom: 0;
        .search-wrap {
          background-color: white;
          padding: 10px 20px;
          position: sticky;
          top: 0px;
          width: 100%;
          box-sizing: border-box;
          z-index: 2;
          border-radius: 0 10px 0 0;
        }
        .list-warp {
          padding: 20px 10px 0 10px;
          height: calc(100% - 72px);
          overflow-y: auto;
          & > div {
            display: grid;
            grid-template-columns: repeat(var(--num), 1fr);
          }
          .el-col {
            padding: 0 10px;
          }
          .list-item {
            cursor: pointer;
            background-color: white;
            margin-bottom: 20px;
            min-height: 174px;
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #e5e8ef;
            padding: 16px;
            box-sizing: border-box;
            &:hover {
              box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.1);
            }
            &.add-btn {
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              color: #86909c;
              height: calc(100% - 20px);
            }
            h3 {
              display: flex;
              justify-content: space-between;
              img {
                width: 16px;
                height: 16px;
              }
              p {
                flex: 1;
              }
            }
            h4 {
              font-size: 12px;
              color: #86909c;
              font-weight: normal;
              margin-top: 6px;
              margin-bottom: 14px;
            }
            .info {
              & > div {
                display: flex;
                margin-bottom: 10px;
                .label {
                  width: 60px;
                  color: #86909c;
                }
                & > p {
                  flex: 1;
                  .el-divider--vertical {
                    border-left: 1px solid #86909c;
                  }
                  b {
                    font-size: 12px;
                    font-weight: normal;
                    color: #3d3d3d;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
